import React, { useEffect } from 'react';
import * as echarts from 'echarts';

function Echartsbar(props) {
    useEffect(() => {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: props.title,
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: props.legned
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: false, readOnly: false },
                    magicType: { show: false, type: ['line', 'bar'] },
                    restore: { show: false },
                    saveAsImage: { show: false }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: props.xAxis
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: props.legned[0],
                    type: 'bar',
                    data: props.numA,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                },
                {
                    name: props.legned[1],
                    type: 'bar',
                    data: props.numB,
                    markPoint: {
                        data: [
                            { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                            { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    })
    return (
        <div>
            <div id='main' style={{ width: 1300, height: 400 }}></div>
        </div>
    );
}

export default Echartsbar;